<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      @select="handleSelect"
  >
    <template v-for="menuItem in menuItems" :key="menuItem.index">
      <el-submenu v-if="menuItem.children && menuItem.children.length" :index="menuItem.index">
        <template #title>{{ menuItem.title }}</template>
        <el-menu-item
            v-for="subItem in menuItem.children"
            :index="subItem.index"
            :key="subItem.index"
        >
          {{ subItem.title }}
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :index="menuItem.index" :key="menuItem.index">
        <RouterLink :to="menuItem.route"> {{ menuItem.title }}</RouterLink>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {getCurrentUserMenus} from "@/apis/api.ts";

// 定义响应式数据
const menuItems = ref([]);
const activeIndex = ref('');

// 从后端获取菜单数据的函数
const fetchMenuData = async () => {
  try {
    getCurrentUserMenus().then(resp => {
      let respData = resp.data
      for (let i = 0; i < respData.length; i++) {
        let tmp = {
          'index': i,
          'title': respData[i].rootNode.menuName,
          'route': respData[i].rootNode.menuRoute,
          'children': []
        }
        // 加入菜单
        menuItems.value.push(tmp)
      }
    })
    console.log("1", menuItems.value)
    // menuItems.value = response.data;
    // menuItems.value = [
    //   {
    //     "index": "1",
    //     "title": "Dashboard",
    //     "children": []
    //   },
    //   {
    //     "index": "2",
    //     "title": "Users",
    //     "children": [
    //       {
    //         "index": "2-1",
    //         "title": "List Users"
    //       },
    //       {
    //         "index": "2-2",
    //         "title": "Create User"
    //       }
    //     ]
    //   },
    //   {
    //     "index": "3",
    //     "title": "Settings",
    //     "children": []
    //   }
    // ]
    // 如果需要，可以设置默认选中的菜单项
    // activeIndex.value = menuItems.value[0].index; // 例如选择第一个菜单项（如果有的话）
  } catch (error) {
    console.error('Failed to fetch menu data:', error);
  }
};

// 在组件挂载后获取菜单数据
onMounted(fetchMenuData);

// 处理菜单项选择事件的函数
const handleSelect = (key, keyPath) => {
  console.log('Selected menu item:', key, keyPath);
  activeIndex.value = key;
  // 在这里处理菜单项选择后的逻辑
};

</script>

<style scoped>
.el-menu-vertical-demo {
  width: 200px;
  min-height: 400px;
  border-right: none;
}
</style>